<template>
  <div class="person">
    <h1>情况二:监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <button @click=changeName>修改名字</button><br>
    <button @click=changeAge>修改姓名</button><br>
    <button @click=changePerson>修改整个人</button>
  </div>
</template>

<script lang='ts' setup name="Person">
import { ref, watch } from 'vue'

let person = ref({
  name: '张三',
  age: 18
})
function changeName() {
  person.value.name += '~'
}
function changeAge() {
  person.value.age += 1
}
function changePerson() {
  person.value = { name: '李四', age: 90 };
}
//监视,情况一:监视[ref]定义的[对象类型]数据,监视的是对象的地址值
//若想监视对象的内部属性变化，需要手动配置
/*
watch的第一个参数是:被监视的数据
watch的第二个参数是:监视的回调
watch的第三个参数是:配置对象(deep,immediate等待)
deep是就算只改变类中的一个属性,控制台上也会显示打印
immdiate是一打开界面就会有console台上新旧值的打印
*/
watch(person, (newValue, oldValue) => {
  console.log('person变化了', newValue, oldValue)
}, { deep: true, immediate: true })
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>